<template>
  <el-dialog title="点名签到" :close-on-click-modal="false" :destroy-on-close="true" width="600px" :visible.sync="isShow" class="add-class" :before-close="closeBox">
    <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px">
      <el-checkbox v-model="ruleForm.isLimited" style="margin-left: 35px;margin-bottom: 25px;">
        限时
      </el-checkbox>
      <el-input-number v-model="ruleForm.limitedTime" autocomplete="off" :min="1" :disabled="!ruleForm.isLimited" style="margin: 0 15px;width: 150px;"></el-input-number>
      分钟
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: center;">
      <el-button type="primary" @click="submitForm(1)">上课签到</el-button>
      <el-button type="primary" @click="submitForm(2)">开始点名</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { studySign } from '@/api/teacher/onlineCourse'
export default {
  props: ['id'],
  data () {
    return {
      isShow: true,
      ruleForm: {
        isLimited: false,
        limitedTime: undefined
      }
    }
  },
  methods: {
    // 提交表单
    submitForm (e) {
      this.$refs['ruleForm'].validate(async valid => {
        if (valid) {
          if (this.ruleForm.isLimited && !this.ruleForm.limitedTime) {
            this.$message.error('请填写分钟数')
            return
          }
          const data = {
            onlineLessonId: this.id,
            isLimited: this.ruleForm.isLimited ? 1 : 0,
            limitedTime: this.ruleForm.limitedTime,
            callRollType: 1
          }
          if (e === 1) {
            let res = await studySign(data)
            if (res.code === '200') {
              this.$message.success('操作成功')
              // 重新刷新活动列表
              this.$emit('handleEmit', { e })
            } else {
              this.$message.error(res.message)
              this.closeBox()
            }
          }
          if (e === 2) {
            // 选择学生
            this.$emit('handleEmit', {
              data,
              e
            })
          }
        } else {
          return false
        }
      })
    },
    closeBox () {
      this.$emit('handleEmit', {
        e: 0
      })
    }
  }
}
</script>

<style scoped lang="scss" rel="stylesheet/scss">
  .course-study {
    height: 937px;
    width: 1200px;
    margin: 0 auto;
    .left-list {
      width: 452px;
      height: 100%;
    }
    .right-content {
      width: 728px;
      height: 100%;
      background: #fff;
      border: 1px solid rgba(229, 229, 229, 1);
      border-radius: 5px;
      overflow-y: scroll;
    }
  }
  .my-button {
    ::v-deep &.el-button--primary {
      width: 350px;
      height: 55px;
      border-radius: 45px;
      font-size: 18px;
    }
  }
</style>
